<template>
	<view class="activity-rule">
		<view class="activity-rule-time">
			<view class="activity-rule-time-item">
				<view class="label">开始时间</view>
				<view class="val" @click="choseTime('start')" :class="{active: form.start_time}">
					{{form.start_time?form.start_time:'请选择开始时间'}}
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
				</view>
			</view>
			<view class="activity-rule-time-item">
				<view class="label">结束时间</view>
				<view class="val" @click="choseTime('end')" :class="{active: form.end_time}">
					{{form.end_time?form.end_time:'请选择结束时间'}}
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="activity-rules">
			<view class="activity-rules-tit">
				<view class="label">奖励规则</view>
				<view class="add" @click="addRule"><image src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png"></image></view>
			</view>
			<view class="activity-rules-list">
				<view class="activity-rules-item" v-for="(data,index) in rule" :key="index">
					<view class="rule-index">第{{index+1}}名</view>
					<view class="rule-name"><input type="text" placeholder="奖励名称(需带单位)" v-model="data.bonus"></view>
					<view class="rule-del"><image src="https://master.shengejiaju.cn/web/static/icons/ico_cancle.png" v-if="index > 0" @click="del(index)"></image></view>
				</view>
			</view>
		</view>
		<view class="activity-switch">
			<view class="label">活动状态</view>
			<switch style="transform:scale(0.8)" color="#2174F5" :checked="status" @change="switchStatus"></switch>
		</view>
		<view class="activity-switch-btn">
			<view class="btn" @click="submit">确认</view>
		</view>
		<yu-datetime-picker
			@confirm="onConfirm"
			ref="dateTime"
			:value="valueTime"
			:isAll="false"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valueTime: '',
				type: '',
				rule: [{rank: 1,bonus: ''}],
				status: false,
				form: {
					start_time: '',
					end_time: '',
					status: '',
					rule: '',
					rule_id: '',
					activity_id: ''
				}
			};
		},
		onLoad(options) {
			this.form.activity_id = options.activity_id
			this.init()
		},
		methods: {
			init(){
				this.$api.MatchActivityRuleInfo({activity_id: this.form.activity_id}).then(res => {
					if(res.datas){
						this.rule = res.datas.rule
						this.status = res.datas.status==2?false:true
						this.form = {
							start_time: res.datas.start_time,
							end_time: res.datas.end_time,
							status: res.datas.status,
							rule: JSON.stringify(res.datas.rule),
							rule_id: res.datas.rule_id,
							activity_id: res.datas.activity_id
						}
					}
				})
			},
			choseTime(type){
				this.type = type
				if(type==='start'){
					this.valueTime = this.form.start_time
				}else{
					this.valueTime = this.form.end_time
				}
				console.log(this.valueTime)
				this.$nextTick(() => {
					this.$refs.dateTime.show()
				})
			},
			onConfirm(e){
				if(this.type==="start"){
					this.form.start_time = e.selectRes
				}else{
					this.form.end_time = e.selectRes
				}
			},
			addRule(){
				this.rule.push({
					rank: this.rule.length+1,
					bonus: ''
				})
			},
			switchStatus(e){
				this.status = e.detail.value
			},
			del(index){
				this.rule.splice(index,1)
			},
			submit(){
				if(!this.form.start_time){
					return uni.showToast({
						icon: 'none',
						title: '请选择开始时间'
					})
				}else if(!this.form.end_time){
					return uni.showToast({
						icon: 'none',
						title: '请选择结束时间'
					})
				}
				for(var i in this.rule) {
					if(!this.rule[i].bonus){
						return uni.showToast({
							icon: 'none',
							title: '第'+ (Number(i+1)) + '名奖励不能为空'
						})
					}
				}
				let rule = []
				this.rule.forEach((item,index) => {
					rule.push({
						rank: index+1,
						bonus: item.bonus
					})
				})
				let data = {
					start_time: this.form.start_time,
					end_time: this.form.end_time,
					status: this.status?1:2,
					rule: JSON.stringify(rule),
					rule_id: this.form.rule_id,
					activity_id: this.form.activity_id
				}
				this.$api.UpMatchActivity(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.activity-rule{
		padding: 30rpx 30rpx 140rpx;
		.activity-rule-time{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 8rpx;
			.activity-rule-time-item{
				display: flex;
				justify-content: space-between;
				position: relative;
				&:first-child{
					margin-bottom: 40rpx;
					&::after{
						content: '';
						position: absolute;
						width: 1px;
						border-left: dashed 3rpx #ccc;
						height: 90%;
						top: 100%;
						left: 10rpx;
					}
				}
				.label{
					color: #666;
					font-size: 32rpx;
					position: relative;
					&::before{
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						border: solid 6rpx #2073f5;
						box-sizing: border-box;
						margin: -4rpx 20rpx 0 0;
					}
				}
				.val{
					color: #999;
					font-size: 32rpx;
					&.active{
						color: #141414;
					}
					image{
						width: 16rpx;
						height: 26rpx;
						vertical-align: middle;
						margin-left: 10rpx;
					}
				}
			}
		}
		.activity-rules{
			margin-top: 20rpx;
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 8rpx;
			.activity-rules-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-size: 32rpx;
					font-weight: bold;
					color: #141414;
				}
				.add{
					background-color: #000;
					width: 44rpx;
					height: 44rpx;
					image{
						width: 44rpx;
						height: 44rpx;
						transform: rotate(45deg);
					}
				}
			}
			.activity-rules-list{
				.activity-rules-item{
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					.rule-index{
						height: 80rpx;
						line-height: 80rpx;
						width: 130rpx;
						text-align: center;
						font-size: 28rpx;
						font-weight: bold;
						background-color: #F9F9F9;
					}
					.rule-name{
						flex: 1;
						min-width: 0;
						margin-left: 20rpx;
						input{
							width: 100%;
							background-color: #F9F9F9;
							height: 80rpx;
							line-height: 80rpx;
							padding: 0 20rpx;
							box-sizing: border-box;
							font-size: 28rpx;
						}
					}
					.rule-del{
						width: 50rpx;
						height: 50rpx;
						margin-left: 20rpx;
						image{
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}
		}
		.activity-switch{
			display: flex;
			align-items: center;
			border-radius: 8rpx;
			background-color: #FFF;
			margin-top: 30rpx;
			padding: 30rpx;
			justify-content: space-between;
			.label{
				font-size: 30rpx;
			}
		}
		.activity-switch-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 75rpx;
			height: 120rpx;
			background-color: #FFF;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				flex: 1;
				height: 90rpx;
				background-color: #2174F5;
				border-radius: 8rpx;
				color: #FFF;
				font-size: 30rpx;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
</style>